<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>考评页面</title>
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/weui.min.css')}}">
    <link rel="stylesheet" href="{{asset('/addons/jquery-weui-build/css/jquery-weui.css')}}">
    <link rel="stylesheet" href="/css/system/front-iconfont.css?v=2018121301">
    <link rel="stylesheet" href="/css/admin/mobileSelect.css">
    @if($skinid == 3)
        <link rel="stylesheet" href="/css/system/common.css?v={{time()}}">
        <link rel="stylesheet" href="/css/system/index-view.css?v={{time()}}">
    @elseif($skinid == 1)
        <link rel="stylesheet" href="/css/theme-blue/system/common.css?v={{time()}}">
        <link rel="stylesheet" href="/css/theme-blue/system/index-view.css?v={{time()}}">
        {{--蓝色业绩明细部分样式--}}
        <link rel="stylesheet" href="/css/theme-blue/system/free-detail.css?v={{time()}}">

    @elseif($skinid == 2)
        <link rel="stylesheet" href="/css/theme-pink/system/iconfont-pink.css">
        <link rel="stylesheet" href="/css/theme-pink/system/common.css">
        <link rel="stylesheet" href="/css/theme-pink/system/index-view.css?v={{time()}}">
        {{--粉色业绩明细部分样式--}}
        <link rel="stylesheet" href="/css/theme-pink/system/free-detail.css?v={{time()}}">
    @endif
    <style>
        .p-right-year-title{
            float:right;
            margin-right: 0.2rem;
            display: inline-block;
            border: 1px solid #fdb261;
            border-radius: 15px;
            padding: 0 0.2rem;
            color: #fdb261;
            margin-top: 5px;
        }
    </style>
    <style>
        #trigger3 {
            cursor: pointer;
            text-align: right;
            margin-right: 10px;
            color:#535353;
        }
        .weui-cell__bd:after{
            content: " ";
            display: inline-block;
            height: 6px;
            width: 6px;
            border-width: 2px 2px 0 0;
            border-color: #c8c8cd;
            border-style: solid;
            -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
            transform: matrix(.71,.71,-.71,.71,0,0);
            position: relative;
            top: -2px;
            position: absolute;
            top: 50%;
            margin-top: -4px;
            right: 12px;
        }
    </style>
</head>
<body ontouchstart>

<div class="index-review">
    <div class="weui-cell" style="height:30px;">
        <div class="weui-cell__hd">
            <p><i class="icon iconfont icon-kaoqin year-param-icon" style="font-size: 24px;"></i><span style="vertical-align: middle; margin-left: 10px; color:#535353;">选择时间</span></p>
        </div>
        <div class="weui-cell__bd">
            <div id="trigger3">{{$year_param}}</div>
        </div>
    </div>
    <div class="header-bk">
        <div class="con-head">
            <img src="{{ !empty($user->user_logo) ?asset($user->user_logo).'?v='.time():'/img/list-demo1.png'}}">
            <span class="user-name">{{getUserName($perf->user_id)}}</span>
            {{--<div class="sec-li2">
                <p class="score-list">年度:{{$year_param}}</p>
            </div>--}}
            <div class="sec-li" @if($skinid == 1) style="color:#ffffff; background: 0;  margin-top: 4px;   padding-left: 0;" @elseif($skinid == 2) style="margin-top: 4px;   padding-left: 0; color:#b94b70; background: 0;" @elseif($skinid == 3) style=" margin-top: 4px;     padding-left: 0; color:#499c90; background: 0;" @endif>
                <p class="score-list">综合绩效:{{round($perf->total,2)}}</p>
            </div>
        </div>
        <div class="list-content">

            <div class="section-li" @if($myuid == $perf->user_id) @endif>
                <span class="circl-span sec-circle"></span>
                @if($myuid == $perf->user_id || $is_admin == 1)
                    <a href="/user/achievement?uid={{$uid}}&year={{$year_param}}">业绩:</a>
                @else
                    <a href="javascript:void(0);" onclick="alert('不支持查看他人业绩明细');">业绩:</a>
                @endif
                <p class="score-list">{{str_limit($perf->yeji,6)}}</p>
            </div>
            <div class="section-li" @if($myuid == $perf->user_id)  @endif>
                <span class="circl-span third-circle"></span>
                @if($myuid == $perf->user_id || $is_admin == 1)
                    <a href="/user/attendance?uid={{$uid}}&year={{$year_param}}">考勤:</a>
                @else
                    <a href="javascript:void(0);" onclick="alert('不支持查看他人考勤明细');">考勤:</a>
                @endif
                <p class="score-list">{{round($perf->kaoqin,2)}}</p>
            </div>
            <div class="section-li" @if($myuid == $perf->user_id)  @endif>
                <span class="circl-span third-circle"></span>
                @if($myuid == $perf->user_id || $is_admin == 1)
                    <a href="/user/reward/index?uid={{$uid}}&year={{$year_param}}">奖惩:</a>
                @else
                    <a href="javascript:void(0);" onclick="alert('不支持查看他人奖惩明细');">奖惩:</a>
                @endif
                <p class="score-list">{{$perf->jiangcheng}}</p>
            </div>
        </div>
    </div>
    <p class="p-title">月度意见</p>
    <p class="p-right-year-title">{{$year_param}}</p>
{{--    <div class="echart-contain" style="width: 300px;height: 300px;margin: 0 auto;">
        <div id="part" style="width: 300px;height: 300px; padding-top: 20px; overflow: hidden;">
            @if($is_origin ==1)
                <canvas id="myCanvas" width="900" height="900" style=" width: 300px;height:300px;">
                </canvas>
            @else
                <span style="margin-left: 120px;">没有数据</span>
                <canvas id="myCanvas"  width="900" height="900"
                        style="display:none; width: 300px;height:300px;">
                </canvas>
            @endif
        </div>
    </div>--}}
    @if($is_origin==1)
        <div id="echart_ld" style="width:100%;height:300px"></div>
    @else
        <p style="text-align: center;height:300px;"> 还没有收到评价意见</p>
    @endif

    <p class="p-title">年度考评</p>
    <p class="p-right-year-title">{{$year_param}}</p>
        <div id="part2" style="width: 100%;height: 240px;">
        </div>

    @if($tips->count() > 0)
    <p class="p-title" style="margin-bottom: 40px;margin-top: 30px;">业绩明细</p>
    <p class="p-right-year-title"  style="margin-bottom: 40px;margin-top: 30px;">{{$year_param}}</p>
    <div id="part3" style="width: 100%;height: 340px; ">
    </div>
    @endif

    <div style="height:0.5rem;"></div>
    @if($has_access == 1)
    <div class="free-detail-con">
        <div class="free-dotline"></div>
        <div>
            <div class="free-dot"></div>
            <div class="free-dot-tit">费用明细</div>
        </div>
        <div class="detail-con">
            <div class="detail-con-tit">
                <div class="detail-tit">{{$year_param}}年</div>
                <div class="detail-con-arr">
                    <img src="/img/arrow.png"/>
                </div>
            </div>
            <div class="detail-free-achivement detail-free-achivement0">
                <div class="free-achivement-lef0">
                    <div>
                        <div class="detail-free">
                            <div class="detail-free-tit0">年度费用</div>
                            <div class="detail-num0">{{str_limit(getTransferMoney($year_cost),10)}}</div>
                        </div>
                        {{--<div class="detail-triangle0"></div>--}}
                    </div>
                </div>
                <div>
                    <div class="detail-bigcircle">
                        @if($year_sales > 0)
                            <div @if(!isset($month_percent[0])) class="detail-circle" @else @if(round($year_cost/$year_sales,2)*100 > $month_percent[0]) class="detail-circle-red" @elseif(round($year_cost/$year_sales,2)*100 == $month_percent[0]) class="detail-circle" @else class="detail-circle-green" @endif @endif>
                                @if($year_sales > 0 && $year_cost > 0)
                                    {{round($year_cost/$year_sales,2)*100}}%
                                @else
                                    0%
                                @endif
                            </div>
                        @else
                            <div class="detail-circle-yellow">
                                <img src="/img/yellow.png"/>
                            </div>
                        @endif
                        {{--<div class="detail-circle">

                        </div>--}}
                    </div>
                </div>
                <div class="free-achivement-rig0">
                    <div>
                        <div class="detail-free1">
                            <div class="detail-achivement0">年度业绩</div>
                            <div class="detail-num10">{{str_limit(getTransferMoney($year_sales),10)}}</div>
                        </div>
                        {{--<div class="detail-triangle10"></div>--}}
                    </div>
                </div>
            </div>
            <div class="detail-dotline"></div>
            @foreach($month_sales_array as $k=>$v)
                <div class="detail-link-con">
                    <div class="detail-link">
                        <div class="detail-dot"></div>
                        <div class="detail-dotline2"></div>
                        <div class="detail-month">{{$k+1}}月</div>
                        <div class="detail-dotline2"></div>
                        {{--<div class="detail-name" data-content="{{!empty($month_title_array[$k])?$month_title_array[$k]->description:''}}">{{!empty($month_title_array[$k])?$month_title_array[$k]->name:''}}</div>--}}
                    </div>
                    <div class="detail-free-achivement">
                        <div class="free-achivement-lef" data-content="{{!empty($month_title_array[$k])?$month_title_array[$k]->description:''}}" data-title="{{!empty($month_title_array[$k])?$month_title_array[$k]->name:''}}">
                            <div>
                                <div class="detail-free">
                                    {{--<div class="detail-free-tit">费用</div>--}}
                                    <div class="detail-num">{{str_limit(getTransferMoney($month_cost_array[$k]),10)}}</div>
                                </div>
                                <div class="detail-triangle"></div>
                            </div>
                        </div>
                        <div>
                            <div class="detail-bigcircle">
                                @if($month_sales_array[$k] > 0)
                                    <div @if(!isset($month_percent[$k])) class="detail-circle" @else @if(round($month_cost_array[$k]/$month_sales_array[$k],2)*100 > $month_percent[$k]) class="detail-circle-red" @elseif(round($month_cost_array[$k]/$month_sales_array[$k],2)*100 == $month_percent[$k]) class="detail-circle" @else class="detail-circle-green" @endif @endif>
                                        @if($month_sales_array[$k] > 0 && $month_cost_array[$k] > 0)
                                            {{round($month_cost_array[$k]/$month_sales_array[$k],2)*100}}%
                                        @else
                                            0%
                                        @endif
                                    </div>
                                @else
                                    <div class="detail-circle-yellow">
                                        <img src="/img/yellow.png"/>
                                    </div>
                                @endif
                                <div class="detail-longline"></div>
                            </div>
                        </div>
                        <div class="free-achivement-rig">
                            <div>
                                <div class="detail-free1">
                                    {{--<div class="detail-achivement">业绩</div>--}}
                                    <div class="detail-num1">{{str_limit(getTransferMoney($month_sales_array[$k]),10)}}</div>
                                </div>
                                <div class="detail-triangle1"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            {{--<div class="detail-link-con">
                <div class="detail-link">
                    <div class="detail-dot"></div>
                    <div class="detail-dotline2"></div>
                    <div class="detail-month">11月</div>
                    <div class="detail-dotline2"></div>
                    <div class="detail-name">2020年项目项目项目</div>
                </div>
                <div class="detail-dotline1"></div>
                <div class="detail-free-achivement">
                    <div class="free-achivement-lef">
                        <div>
                            <div class="detail-free">费用</div>
                            <div class="detail-triangle"></div>
                        </div>
                        <div class="detail-num">20000</div>
                    </div>
                    <div>
                        <div class="detail-bigcircle">
                            <div class="detail-circle">20%</div>
                            <div class="detail-longline"></div>
                        </div>
                    </div>
                    <div class="free-achivement-rig">
                        <div>
                            <div class="detail-achivement">业绩</div>
                            <div class="detail-triangle1"></div>
                        </div>
                        <div class="detail-num1">100000</div>
                    </div>
                </div>
            </div>
            <div class="detail-link-con">
                <div class="detail-link">
                    <div class="detail-dot"></div>
                    <div class="detail-dotline2"></div>
                    <div class="detail-month">11月</div>
                    <div class="detail-dotline2"></div>
                    <div class="detail-name">2020年项目项目项目</div>
                </div>
                <div class="detail-dotline1"></div>
                <div class="detail-free-achivement">
                    <div class="free-achivement-lef">
                        <div>
                            <div class="detail-free">费用</div>
                            <div class="detail-triangle"></div>
                        </div>
                        <div class="detail-num">20000</div>
                    </div>
                    <div>
                        <div class="detail-bigcircle">
                            <div class="detail-circle">20%</div>
                            <div class="detail-longline"></div>
                        </div>
                    </div>
                    <div class="free-achivement-rig">
                        <div>
                            <div class="detail-achivement">业绩</div>
                            <div class="detail-triangle1"></div>
                        </div>
                        <div class="detail-num1">100000</div>
                    </div>
                </div>
            </div>--}}
        </div>
    </div>
    @endif
    <div style="height:2rem;"></div>
    {{--备注弹框--}}

</div>
@include('frontuser.caidan')
<script src="{{asset('/kaohe/js/jquery-2.1.4.min.js')}}"></script>
<script src="{{asset('/addons/jquery-weui-build/js/fastclick.js')}}"></script>
<script src="{{asset('/kaohe/js/echarts-all.js')}}"></script>
<script src="{{asset('/kaohe/js/sakura.js')}}"></script>
<script src="/js/mobileSelect.js"></script>


<script>
    $(function() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        FastClick.attach(document.body);
    });

</script>
<script src="{{asset('/addons/jquery-weui-build/js/jquery-weui.min.js')}}"></script>
<script src="/kaohe/js/echarts.min.js?v=2018121901"></script>
<script>
     @if($is_origin==1)
    var myChart_ld= echarts.init(document.getElementById('echart_ld'));
    option_ld = {
        tooltip : {
            trigger: 'axis'
        },

        polar : [
            {
                indicator : [
                        @foreach($name_opinion as $value)
                    { text: '{{$value}}', max: 5},
                    @endforeach
                ]
            }
        ],
        calculable : true,
        series : [
            {

                name: '综合得分',
                type: 'radar',
                data : [
                    {
                        value :{!! $value_opinion!!},
                        name : '得分'
                    }
                ]
            }
        ]
    };
    myChart_ld.setOption(option_ld);
    @endif
    $('.kaohe-item').click(function(){
        $('.front-show-hidden').toggle();
    })
    $('.set-btn').click(function () {
        $('.set-hidden').toggle();
    })
    
    var myChart2 = echarts1.init(document.getElementById('part2'));
    option2 = {
    @if($skinid == 3)
        color: ['#65B7B1'],
     @elseif($skinid == 1)
        color: ['#3983C5'],
     @elseif($skinid == 2)
        color:['#FEA8A9'],
     @endif
    legend: {
        data:['绩效值'],
        right:20
    },
    tooltip : {
        trigger: 'axis'
    },    
    grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
         {
            name:'绩效值',
            type:'bar',
            barWidth: '60%',
             markLine: {
                 data: [
                     { yAxis: 100, name: '满分线'}
                 ]
             },
            data:{!! $months !!}

        }
    ]
};
    myChart2.setOption(option2);

     tisName={!! $tisName !!}
     tisNum={!! $tisNum !!}
     tisCol ={!! $tisCol !!}
     heig=tisName.length*32;

     $("#part3").css("height",heig);
     var myChart3 = echarts1.init(document.getElementById('part3'));

     option3 = {
         color: ['#95c7ff'],
         tooltip: {
             trigger: 'item',
             axisPointer: {
                 type: null // 默认为直线，可选为：'line' | 'shadow'
             },
             //backgroundColor: 'rgba(255,255,255,1)',
             //padding: [5, 10],
             //textStyle: {
             //color: '#7588E4',
             //},

             //formatter: '<div style="text-align: center;">流失用户金币分布</div>{b}  :  {c}'
         },
         grid: {
             left: '22%',
             right: '8%',
             bottom: '20%',
             top: '0%'
         },
         xAxis: [{
             type: 'value',
             // show: false
         }],
         yAxis: [{
             type: 'category',
             //boundaryGap: true,

             splitLine: {
                 show: false,
                 lineStyle: {
                     color: ['#D4DFF5']
                 }
             },
             axisTick: {
                 show: false
             },
             axisLine: {
                 show: false,
                 lineStyle: {
                     color: '#609ee9'
                 }
             },

             axisLabel: {
                 // show:false,
                 margin: 5,
                 textStyle: {

                     fontSize: 12,
                     color:"rgba(11, 11,11,1)"
                 }
             },

             data: tisName.reverse()
         }],
         series: [{
             type: 'bar',
             stack: '分数',
             barWidth: '60%',
             itemStyle: {
                 normal: {
                     color: function(params) {
                         // build a color map as your need.
                         var colorList = tisCol.reverse();
                         return colorList[params.dataIndex]
                     }
                 }
             },
             label: {
                 normal: {
                     show: true,
                     position: 'right',
                     fontSize: 16,
                     // formatter: '{c}%'
                 }
             },
             data: tisNum.reverse()
         }]
     };
     if (option3 && typeof option3 === "object") {
         myChart3.setOption(option3, true);
         // 使用刚指定的配置项和数据显示图表。
         // 处理点击事件并且跳转到相应的百度搜索页面
         myChart3.on('click', function (params) {
             console.log(params)
             window.open('/user/showTig?name=' + encodeURIComponent(params.name)+"&uid="+{{$uid}},'_self');
         });
     }

     myChart3.setOption( option3);
</script>
<script>
    $(document).ready(function(){
        var UplinkData = {!! $yearlist !!};
        var mobileSelect3 = new MobileSelect({
            trigger: '#trigger3',
            title: '选择时间',
            wheels: [
                {data: UplinkData}
            ],
            //     keyMap: {
            //        id:'id',
            //        value: 'name',
            //        childs :'son'
            //      },
            position: [0, 1],
            callback: function (indexArr, data) {
                //
                var year = data[0].id;

                window.location.href = '/user/performance/history-perf?uid={{$uid}}&year=' + year ;
                console.log(data[0].id); //返回选中的json数据
            }
        });

        //去掉业绩明细最后一根虚线
        $('.detail-con').children('.detail-link-con').last().find('.detail-longline').remove();

        //点击弹出备注弹框
        $('.free-achivement-lef').click(function () {
            var tit = $(this).attr('data-title');
            var cont = $(this).attr('data-content');
            $('.free-detail-con').after('<div class="blackbgd">'
                    +'<div class="blackbgd-con">'
                    +'<div class="blackbgd-con-txt">'
                    +cont
                    +'</div>'
                    +'</div>'
                    +'</div>'
            );
            $('html').css("overflow", "hidden");
        })

        //点击透明背景关闭此区域
        $('body').on("click", '.blackbgd', function () {
            $(this).remove();
            $('html').css("overflow", "auto");
        })

        //点击明细下拉箭头
        $('.detail-con-arr').click(function () {
            $(this).toggleClass("divArrow");
            $('.detail-link-con').toggleClass("link-con-dis");
            $('.detail-dotline').toggleClass("detail-dotline-dis");
        })
    })
</script>
</body>
</html>